<template>
	<view class="container">
		<!-- <u-sticky h5-nav-height="0"> -->
			<view class="screening-tab">
				<view class=" ">
					<u-dropdown :close-on-click-mask="true" ref="filtDropdown" activeColor="#ff9900" :borderBottom="false">
						<u-dropdown-item @change=downChange v-model="changeValue" title="状态" :options="options1"></u-dropdown-item>
						<u-dropdown-item title="时间筛选">
							<view class="slot-content" style="background-color: #FFFFFF;">
								<view class="filtrate">
									<view class="filtrate-title">时间</view>
									<view class="filtrate-body">
										<u-form :model="searchForm" label-width="200">
											<u-form-item label="开始时间">
												<u-input v-model="searchForm.startTime" type="select" :select-open="timeType==1" @click="searchTimeShow = true;timeType=1"
												 placeholder="请输入开始时间" />
											</u-form-item>
											<u-form-item label="结束时间">
												<u-input v-model="searchForm.endTime" type="select" :select-open="timeType==2" @click="searchTimeShow = true;timeType=2"
												 placeholder="请输入结束时间" />
											</u-form-item>
										</u-form>
									</view>
									<view class="filtrate-btns">
										<u-button size='medium' shape="square" @click="searchCancel">取消</u-button>
										<u-button size='medium' type="warning" shape="square" @click="searchConfirm">确认</u-button>
									</view>
								</view>
							</view>
						</u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
		<!-- </u-sticky> -->
		<view class="content">
			<u-card v-for="(item,index) in orderList" margin='20rpx 0rpx' :title="item.order_no" :sub-title="item.status==0?'待支付':item.status==1?'支付成功':'已退款'"
			 title-size='25' sub-title-size='20'>
				<view class="card-con" slot="body">
					<view class="card-body-l">
						<view class="info">
							<text>商户：</text>
							<text>{{item.user_name}}</text>
						</view>
						<view class="info">
							<text>订单金额：</text>
							<text>{{item.total_amount}}</text>
						</view>
						<view class="info">
							<text>订单名称：</text>
							<text>{{item.body}}</text>
						</view>
						<view class="info">
							<text>下单时间：</text>
							<text>{{item.create_time}}</text>
						</view>
						<view class="info">
							<text>支付时间：</text>
							<text>{{item.pay_time}}</text>
						</view>
					</view>
					<view class="card-body-r">
						<view>支付：{{item.pay_amount}}</view>
					</view>
				</view>
			</u-card>
		</view>
		<view class="more-area" v-if="isDataEmpty">
			<u-divider bg-color="#f4f4f5">{{showTips?'上拉加载更多':'已加载全部'}}</u-divider>
		</view>
		<view v-else class="empty-data">
			<u-empty text="暂时没有数据" mode="data"></u-empty>
		</view>
		<u-picker v-model="searchTimeShow" mode="time" @confirm="timeConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//agentID: uni.getStorageSync('userID'),
				userID:uni.getStorageSync('userID'),
				id: '',
				changeValue: null,
				options1: [{
					label: '全部',
					value: null
				}, {
					label: '待支付',
					value: 0
				}, {
					label: '已支付',
					value: 1
				}, {
					label: '已退款',
					value: 2
				}],
				offset: 1,
				showTips: 1,
				allOffset: 1,
				limit: 10,
				orderList: [],
				isDataEmpty: true,
				searchForm: {},
				timeinfo:{
					startTime: '',
					endTime: '',
				},
				searchTimeShow: false, //时间筛选器
				timeType: 0
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			});
			this.isPersonal(options.id);
		},
		methods: {
			isPersonal(e) {
				if (e) {
					this.id = e;
				}
				this.getOrderList(this.changeValue,this.timeinfo);
			},
			//得到订单列表
			getOrderList(status, param) {
				let that = this;
				let rdata = {
					userID: that.userID,
					status: status,
					offset:that.offset,
					limit: that.limit,
				};
				//时间筛选
				if(param.startTime && param.endTime){
					rdata.startTime = param.startTime;
					rdata.endTime = param.endTime;
				}
				
				this.$request.httpTokenRequest({
					url: '/admin/general/getUserOrder',
					method: 'POST',
					data: rdata,
					// needToken: false,
				}).then(res => {
					if (res.data.code == 200) {
						uni.hideLoading();
						that.orderList = that.orderList.concat(res.data.content.data);
						that.allOffset = Math.ceil(res.data.content.count / that.limit);
						if (res.data.content.count < that.limit) that.showTips = 0;
						res.data.content.count > 0 ? that.isDataEmpty = true : that.isDataEmpty = false;	
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}, error => {});
			},
			//状态筛选
			downChange(e) {
				uni.showLoading({
					title: '加载中...'
				});
				this.offset = 1,
				this.showTips = 1,
				this.allOffset = 0,
				this.limit = 10,
				this.orderList = [],
				this.getOrderList(e,this.timeinfo);
			},
			//时间选择器 选择时间
			timeConfirm(e) {
				let that = this;
				if (that.timeType === 1) {
					that.searchForm.startTime = e.year + '-' + e.month + '-' + e.day;
				} else if (that.timeType === 2) {
					that.searchForm.endTime = e.year + '-' + e.month + '-' + e.day;
				}
				this.timeType = 0;
			},
			//时间选择取消
			searchCancel() {
				//闭下拉菜单
				this.$refs.filtDropdown.close();
			},
			//时间选择确定
			searchConfirm() { //确定传入时间
				if(this.searchForm.endTime && this.searchForm.startTime){
					let that = this;
					this.$request.httpTokenRequest({
						url: '/admin/general/setTime',
						method: 'POST',
						data: {
							startTime: this.searchForm.startTime,
							endTime: this.searchForm.endTime
						},
						// needToken: false,
					}).then(res => {
						if(res.data.code == '200'){
							that.timeinfo.startTime = res.data.content.startTime;
							that.timeinfo.endTime = res.data.content.endTime;
							uni.showLoading({
								title: '加载中...'
							});
							let param = {
								startTime : res.data.content.startTime,
								endTime : res.data.content.endTime,
							};
							this.offset = 1,
							this.showTips = 1,
							this.allOffset = 0,
							this.limit = 10,
							this.orderList = [],
							this.getOrderList(this.changeValue,param);
						}
					},error => {});
				}else{
					uni.showToast({
						icon: 'error',
						position: 'bottom',
						title: '缺少开始时间或结束时间！'
					});
					return;
				}
				
			
				//闭下拉菜单
				this.$refs.filtDropdown.close();
			}

		},
		//下拉
		onReachBottom() {
			if (this.offset >= this.allOffset) {
				this.showTips = 0
				return false;
			}
			this.offset += 1;
			this.getOrderList(this.changeValue, this.timeinfo);
		}

	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
		background: #f4f4f5;
	}

	.container {
		width: 100%;
		height: 100%;

		.screening-tab {
			background: #FFFFFF;

			.filtrate {
				width: 90%;
				margin: 0 auto;

				.filtrate-title {
					font-size: 20rpx;
				}

				.filtrate-body {
					padding: 20rpx 30rpx;
				}

				.filtrate-btns {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.content {
			width: 96%;
			margin: 0 auto;

			.card-con {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.card-body-l {
					.info text:first-child {
						color: #000000;
					}
				}

				.card-body-r view:last-child {
					font-size: 30rpx;
					color: #000;
				}
			}
		}

		.more-area {
			padding: 1rem 0;
		}

		.empty-data {
			padding-top: 6rem;
		}
	}
</style>
